feat(receive): redesign receive flow with improved sheets and toasts#480
feat(receive): redesign receive flow with improved sheets and toasts#480sahilc0 wants to merge 14 commits intowt-navbar-root-only-20260325from
Conversation
- Skip amount screen, show QR immediately on receive - Custom SVG QR with circular dots, rounded finder patterns, Arkade logo center - Logo uses brand color (--logo-color), adapts to light/dark theme - QR dots animate in with staggered ripple on value change - Buttons inline with content (not fixed footer) — scrollable layout - Amount entry and copy address via bottom sheet modals - SheetModal accounts for pill navbar clearance - Content noFade prop to disable scroll mask on receive screen - Fetch addresses on mount (merged from Amount screen)
- Sheet modal: iOS-inspired with shadow, handle bar, rounded close button - Sheet z-index above navbar (z-index: 200), backdrop dismiss enabled - Haptics on sheet close - Amount keyboard bypasses sheet on save — goes straight to QR - Button label: "Add amount" / "Edit amount" instead of sats number - Clear amount option in sheet to reset to no-amount QR - "500 sats min for Lightning" hint tightly coupled under QR - "Requesting X sats" text positioned closer to QR
Receive flow layout: - Center QR vertically in available space, pin actions to bottom - Add breathing room with 1.5rem bottom padding on actions - Reorder copy addresses: Unified > Lightning > Arkade > Bitcoin - Rename BIP21 to "Unified", BTC address to "Bitcoin address" Sheet modal (Vaul-inspired): - Move visual styling to Ionic CSS custom properties (--background, --box-shadow, --overflow, --border-width) to escape shadow DOM overflow clipping that was hiding shadows on inner elements - Remove close X button, use handle bar + backdrop dismiss - Wider pill handle (40px), softer shadow, 16px border-radius - Dark mode: stronger shadow + light border for elevation contrast Toast (Sonner-inspired): - New custom Toast component replacing useIonToast across 6 files - Dark bg on light mode, slightly lighter gray on dark mode - Top-positioned, 250ms ease-out enter/exit, full reduced-motion support - 44px accessible copy buttons with aria-labels and touch-action Accessibility: - Copy icon buttons: div -> button with aria-label, 44px min tap target - Focus highlight: :focus -> :focus-visible (no purple flash on tap) Dev auto-init: - Set authState to 'authenticated' directly instead of persisting encrypted key to localStorage (keeps dev NSEC in-memory only)
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. 🗂️ Base branches to auto review (1)
Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Deploying wallet-bitcoin with
|
| Latest commit: |
0062dad
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://37f0d52c.wallet-bitcoin.pages.dev |
| Branch Preview URL: | https://wt-receive-on-navbar-2026032.wallet-bitcoin.pages.dev |
Deploying wallet-mutinynet with
|
| Latest commit: |
0062dad
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://29bbc92d.arkade-wallet.pages.dev |
| Branch Preview URL: | https://wt-receive-on-navbar-2026032.arkade-wallet.pages.dev |
- Keep master's boot animation, error boundary, LNURL session - Keep PR's redesigned receive UI with sheets and toasts - Integrate LNURL amountless receive into new QR-first flow - Replace removed Loading component with LoadingLogo
The noUserDefinedPassword() check races with the dev auto-init, overriding authState to 'locked' and blocking the boot flow.
The fast auto-init from VITE_DEV_NSEC races with the boot animation timing, causing the overlay to never dismiss.
🔍 Review —
|
| Area | Status |
|---|---|
| LNURL security | ✅ Token auth, validation, abort handling |
| SW recovery | ✅ Zombie detection, retry limits, timeout tuning |
| Error handling | ✅ ErrorBoundary, BootError, Sentry filtering |
| Receive UX | ✅ QR-first, sheet modals, accessibility |
| State management | |
| package-lock.json |
Verdict: Well-structured feature PR with good security practices on the LNURL flow. Two minor issues flagged. The npm lockfile should be removed before merge.
…to wt-fix-conflict-20260402
|
@Kukks fixed the merge conflict — should be good to go now. |
🔍 Iterative Review — Merge Commit
|
|
Issue: don't use hardcoded 500 sats for min lightning, use value received from provider. |
🔍 Arkana PR ReviewScope: UI redesign of the receive flow — QR code, sheet modals, toast system, accessibility. OverviewSolid UX polish. The SVG QR code with animated dots and logo overlay is a nice upgrade from the GIF encoder. Custom toast system is cleaner than ObservationsQR Code Component (
Toast System (
SheetModal (
Receive Page
package-lock.json
SecurityNo concerns — this is purely UI/UX. No key material, no transaction logic, no external API changes. VerdictClean, well-structured UI work. The QR ECC headroom question is the only thing worth verifying before merge. Everything else is polish-tier. Reminder: PR is explicitly blocked on LNURL landing first — do not merge until that dependency is met. |
|
Issue: when user selects/copies one address, the qrcode should change to that address. Scenario: paying wallet only reads lightning invoices, user wants to have a qrcode with only the bolt11 to show to the paying wallet. Fixed by 74ca2b7 |
|
Incorrect buttons spacing
Fixed by 8e5667d
|
🔍 Arkana Review (followup — new commits)Previous review covered the base. This followup addresses changes since New Changes ObservedQR Code component rewrite (
Toast system (
SheetModal redesign:
Receive flow restructure (
CSS changes:
Concerns
Blocked StatusPR body clearly states this is blocked by LNURL implementation. The "show QR first without amount" UX only works end-to-end once zero-invoice Lightning is available. Do not merge until that lands. |
|
Followup review ( Good fix. Moves the action buttons (Amount / Copy / Share) out of the scrollable content area into Also picks up the re-imported No new concerns. |
|
Broken: when receiving assets it says "sats" instead of the asset token
Fixed by 4955070 |
|
a QR code with no border margin makes reading by scanners very hard. |
🔍 Arkana PR Review —
|
|
Mobile asset receive is totally broken Screen.Recording.2026-04-03.at.14.58.31.mov |
🔍 PR Review —
|
|
ReceiveAmount page is no longer used, can be removed. |
🔍 Arkana PR Review —
|



Summary
useIonToastacross all call sites — dark bg, top-positioned, 250ms ease-out animations, reduced-motion compliant:focus-visibleinstead of:focus(no purple flash on tap), semantic<button>elements,touch-action: manipulationDependency
This PR is blocked by Kukks' LNURL implementation. The current receive flow shows the QR immediately without an amount, which means Lightning is unavailable until the user sets an amount (500+ sats). Once LNURL lands, we'll have zero-invoice Lightning support and the "show QR first" UX will work end-to-end.
Do not merge until LNURL is available.
Base branch
This PR is based on
wt-navbar-root-only-20260325(#474 — navbar only on root pages) to avoid navbar interference with the receive sheet modals.Test plan